//! HTML解析器相关标签页实现
//!
//! 该模块实现了HTML解析器的各种测试功能，包括HTML解析、DOM操作、CSS选择器、HTML验证等功能。
//! 每个功能对应一个标签页，通过egui框架提供用户界面。

use eframe::egui;
use html_parser::{HtmlValidator, NodeType};

use super::app::FeatureTester;

impl FeatureTester {
    /// 渲染HTML解析测试标签页
    ///
    /// # 参数
    /// - `ui`: egui的用户界面上下文
    ///
    /// # 功能
    /// 提供HTML输入框和解析结果显示区域，用户可以输入HTML并查看解析结果。
    pub fn render_html_parser_tab(&mut self, ui: &mut egui::Ui) {
        ui.heading("HTML解析测试");

        // 计算可用高度，为顶部标签和按钮预留空间
        let available_height = ui.available_height() - 60.0;

        // 使用均匀分布的水平布局，让左右两个面板各占50%
        ui.columns(2, |columns| {
            // 左侧输入面板
            columns[0].vertical(|ui| {
                ui.label("输入HTML:");

                egui::ScrollArea::vertical()
                    .id_source("input_scroll")
                    .max_height(available_height - 30.0) // 为按钮预留空间
                    .show_viewport(ui, |ui, _| {
                        // 使用所有可用宽度
                        let text_edit = egui::TextEdit::multiline(&mut self.html_input)
                            .desired_width(ui.available_width())
                            .code_editor();
                        ui.add_sized([ui.available_width(), available_height - 60.0], text_edit);
                    });

                ui.add_space(5.0);
                if ui.button("解析").clicked() {
                    self.parse_html();
                }
            });

            // 右侧结果面板
            columns[1].vertical(|ui| {
                ui.label("解析结果:");

                egui::ScrollArea::vertical()
                    .id_source("result_scroll")
                    .max_height(available_height)
                    .show_viewport(ui, |ui, _| {
                        let text_edit = egui::TextEdit::multiline(&mut self.parsed_result_display)
                            .desired_width(ui.available_width())
                            .code_editor()
                            .interactive(false);
                        ui.add_sized([ui.available_width(), available_height - 30.0], text_edit);
                    });
            });
        });
    }

    /// 解析当前HTML输入内容
    ///
    /// # 功能
    /// 调用HTML解析器解析输入内容，将结果存储在`parsed_result`和`parsed_result_display`中。
    /// 解析成功时返回格式化后的HTML，失败时返回错误信息。
    pub fn parse_html(&mut self) {
        match self.parser.parse(&self.html_input) {
            Ok(dom) => {
                // 格式化输出
                let result = self.parser.to_html(&dom, false);
                self.parsed_result = Some(result.clone());
                self.parsed_result_display = result; // 更新显示用的字符串
            }
            Err(e) => {
                let error_msg = format!("解析错误: {}", e);
                self.parsed_result = Some(error_msg.clone());
                self.parsed_result_display = error_msg; // 更新显示用的字符串
            }
        }
    }

    // 其他HTML标签页的实现...
    /// 渲染DOM操作测试标签页
    ///
    /// # 参数
    /// - `ui`: egui的用户界面上下文
    ///
    /// # 功能
    /// 提供DOM节点创建、修改和删除操作的测试界面（暂未实现）。
    pub fn render_dom_manipulation_tab(&mut self, ui: &mut egui::Ui) {
        ui.heading("DOM操作测试 (尚未实现)");
        ui.label("这个功能将允许测试DOM节点的创建、修改和删除操作。");
    }

    /// 渲染HTML序列化测试标签页
    ///
    /// # 参数
    /// - `ui`: egui的用户界面上下文
    ///
    /// # 功能
    /// 测试DOM树到HTML的序列化功能，包括格式化选项（暂未实现）。
    pub fn render_html_serialization_tab(&mut self, ui: &mut egui::Ui) {
        ui.heading("HTML序列化测试 (尚未实现)");
        ui.label("这个功能将测试DOM树到HTML的序列化，包括格式化选项。");
    }

    /// 渲染CSS选择器测试标签页
    ///
    /// # 参数
    /// - `ui`: egui的用户界面上下文
    ///
    /// # 功能
    /// 提供HTML输入、CSS选择器输入和选择结果展示区域，测试CSS选择器功能。
    pub fn render_css_selector_tab(&mut self, ui: &mut egui::Ui) {
        ui.heading("CSS选择器测试");

        // 计算可用高度，为顶部标签和按钮预留空间
        let available_height = ui.available_height() - 60.0;

        ui.columns(2, |columns| {
            // 左侧面板 - HTML输入和选择器输入
            columns[0].vertical(|ui| {
                ui.label("HTML内容:");
                egui::ScrollArea::vertical()
                    .max_height(available_height * 0.7)
                    .show(ui, |ui| {
                        ui.add(
                            egui::TextEdit::multiline(&mut self.html_input)
                                .desired_width(ui.available_width())
                                .code_editor(),
                        );
                    });

                ui.add_space(10.0);
                ui.label("CSS选择器:");
                ui.text_edit_singleline(&mut self.css_selector);

                ui.add_space(5.0);
                if ui.button("查找元素").clicked() {
                    self.run_selector();
                }
            });

            // 右侧面板 - 选择器结果
            columns[1].vertical(|ui| {
                ui.label("选择器结果:");
                egui::ScrollArea::vertical()
                    .max_height(available_height)
                    .show(ui, |ui| {
                        ui.add(
                            egui::TextEdit::multiline(&mut self.selector_results)
                                .desired_width(ui.available_width())
                                .code_editor()
                                .interactive(false),
                        );
                    });
            });
        });
    }

    /// 执行CSS选择器查询
    ///
    /// # 功能
    /// 解析当前HTML内容并应用CSS选择器，将结果显示在结果区域。
    /// 目前为简化实现，仅显示DOM结构。
    pub fn run_selector(&mut self) {
        match self.parser.parse(&self.html_input) {
            Ok(dom) => {
                // 简化实现，暂时不使用复杂的选择器逻辑
                self.selector_results =
                    format!("选择器功能尚未完全实现。\n\n解析的HTML结构：\n{:?}", dom);
            }
            Err(e) => {
                self.selector_results = format!("HTML解析错误: {}", e);
            }
        }
    }

    /// 渲染HTML验证标签页
    ///
    /// # 参数
    /// - `ui`: egui的用户界面上下文
    ///
    /// # 功能
    /// 提供HTML输入和验证功能，检查常见HTML问题如缺少alt属性、未闭合标签等。
    pub fn render_validation_tab(&mut self, ui: &mut egui::Ui) {
        ui.heading("HTML验证");

        ui.add_space(10.0);

        ui.label("HTML内容:");
        ui.add(
            egui::TextEdit::multiline(&mut self.html_input.clone())
                .desired_width(ui.available_width())
                .desired_rows(10)
                .code_editor(),
        );

        ui.add_space(10.0);
        if ui.button("验证HTML").clicked() {
            // 在实际应用中，这里应该调用HTML验证器
            let mut validator_results = String::new();

            match self.parser.parse(&self.html_input) {
                Ok(_) => {
                    // 简单验证规则
                    let mut issues = Vec::<String>::new(); // 修改为存储String类型，而不是&str

                    // 检查常见HTML问题
                    if self.html_input.contains("<img") && !self.html_input.contains("alt=") {
                        issues.push("图片标签缺少alt属性，这对可访问性很重要".to_string());
                    }

                    if self.html_input.contains("<a") && !self.html_input.contains("href=") {
                        issues.push("链接标签缺少href属性".to_string());
                    }

                    if self.html_input.contains("</html>") && !self.html_input.contains("<!DOCTYPE")
                    {
                        issues.push("缺少DOCTYPE声明".to_string());
                    }

                    // 检查标签嵌套
                    if self.html_input.contains("<div") && self.html_input.contains("</div>") {
                        let open_count = self.html_input.matches("<div").count();
                        let close_count = self.html_input.matches("</div>").count();

                        if open_count != close_count {
                            // 直接将format!的结果push到issues中，不需要中间变量
                            issues.push(format!(
                                "div标签未正确闭合，开始标签: {}，结束标签: {}",
                                open_count, close_count
                            ));
                        }
                    }

                    // 显示结果
                    if issues.is_empty() {
                        validator_results = "HTML验证通过，未发现问题。".to_string();
                    } else {
                        validator_results = format!("发现 {} 个问题:\n\n", issues.len());
                        for (i, issue) in issues.iter().enumerate() {
                            validator_results.push_str(&format!("{}. {}\n", i + 1, issue));
                        }
                    }
                }
                Err(e) => {
                    validator_results = format!("HTML解析错误: {}", e);
                }
            }

            // 使用正常赋值而不是unsafe代码块
            self.validator_results = validator_results;
        }

        ui.add_space(10.0);
        ui.label("验证结果:");
        ui.add(
            egui::TextEdit::multiline(&mut self.validator_results.clone())
                .desired_width(ui.available_width())
                .desired_rows(8)
                .frame(true)
                .interactive(false),
        );
    }

    /// 渲染表单处理测试标签页
    ///
    /// # 参数
    /// - `ui`: egui的用户界面上下文
    ///
    /// # 功能
    /// 提供HTML表单输入和解析功能，分析表单的action、method和字段信息。
    pub fn render_forms_tab(&mut self, ui: &mut egui::Ui) {
        ui.heading("表单处理");

        ui.add_space(10.0);

        ui.columns(2, |columns| {
            // 左侧 - HTML输入
            columns[0].vertical(|ui| {
                ui.label("HTML表单:");
                ui.add(
                    egui::TextEdit::multiline(&mut self.html_input)
                        .desired_width(ui.available_width())
                        .desired_rows(15)
                        .code_editor(),
                );

                ui.add_space(5.0);
                if ui.button("解析表单").clicked() {
                    // 解析表单内容
                    self.parse_forms();
                }
            });

            // 右侧 - 解析结果
            columns[1].vertical(|ui| {
                ui.label("表单解析结果:");
                ui.add(
                    egui::TextEdit::multiline(&mut self.form_info)
                        .desired_width(ui.available_width())
                        .desired_rows(15)
                        .interactive(false),
                );
            });
        });
    }

    // 添加表单解析辅助方法
    /// 解析HTML表单内容
    ///
    /// # 功能
    /// 分析HTML中的表单元素，提取action、method和字段信息，生成解析报告。
    fn parse_forms(&mut self) {
        let mut form_info = String::new();

        match self.parser.parse(&self.html_input) {
            Ok(_) => {
                // 简单的表单分析
                let forms_count = self.html_input.matches("<form").count();

                if forms_count == 0 {
                    form_info = "未在HTML中发现表单元素".to_string();
                } else {
                    form_info = format!("发现 {} 个表单:\n\n", forms_count);

                    // 检测表单属性
                    let mut form_index = 1;
                    let mut start_index = 0;

                    while let Some(form_start) = self.html_input[start_index..].find("<form") {
                        let actual_start = start_index + form_start;
                        let form_end_tag = "</form>";

                        if let Some(form_end) = self.html_input[actual_start..].find(form_end_tag) {
                            let actual_end = actual_start + form_end + form_end_tag.len();
                            let form_html = &self.html_input[actual_start..actual_end];

                            form_info.push_str(&format!("表单 #{}\n", form_index));

                            // 尝试提取action属性
                            if let Some(action_start) = form_html.find("action=\"") {
                                let action_value_start = action_start + 8; // "action=\"" 长度
                                if let Some(action_end) = form_html[action_value_start..].find("\"")
                                {
                                    let action = &form_html
                                        [action_value_start..action_value_start + action_end];
                                    form_info.push_str(&format!("  Action: {}\n", action));
                                }
                            } else {
                                form_info.push_str("  Action: 未指定\n");
                            }

                            // 尝试提取method属性
                            if let Some(method_start) = form_html.find("method=\"") {
                                let method_value_start = method_start + 8; // "method=\"" 长度
                                if let Some(method_end) = form_html[method_value_start..].find("\"")
                                {
                                    let method = &form_html
                                        [method_value_start..method_value_start + method_end];
                                    form_info.push_str(&format!("  Method: {}\n", method));
                                }
                            } else {
                                form_info.push_str("  Method: GET (默认)\n");
                            }

                            // 计算表单字段
                            let input_count = form_html.matches("<input").count();
                            let select_count = form_html.matches("<select").count();
                            let textarea_count = form_html.matches("<textarea").count();
                            let total_fields = input_count + select_count + textarea_count;

                            form_info.push_str(&format!("  字段数量: {}\n", total_fields));

                            // 列出主要字段
                            if total_fields > 0 {
                                form_info.push_str("  字段列表:\n");

                                // 解析input字段
                                let mut field_index = 1;
                                let mut input_start_index = 0;

                                while let Some(input_start) =
                                    form_html[input_start_index..].find("<input")
                                {
                                    let actual_input_start = input_start_index + input_start;
                                    let input_end = form_html[actual_input_start..]
                                        .find(">")
                                        .map(|pos| actual_input_start + pos + 1)
                                        .unwrap_or(form_html.len());

                                    let input_tag = &form_html[actual_input_start..input_end];

                                    form_info.push_str(&format!("    {}. ", field_index));

                                    // 提取类型
                                    let field_type = if let Some(type_start) =
                                        input_tag.find("type=\"")
                                    {
                                        let type_value_start = type_start + 6; // "type=\"" 长度
                                        if let Some(type_end) =
                                            input_tag[type_value_start..].find("\"")
                                        {
                                            input_tag[type_value_start..type_value_start + type_end]
                                                .to_string()
                                        } else {
                                            "text".to_string() // 默认
                                        }
                                    } else {
                                        "text".to_string() // 默认
                                    };

                                    // 提取名称
                                    let field_name = if let Some(name_start) =
                                        input_tag.find("name=\"")
                                    {
                                        let name_value_start = name_start + 6; // "name=\"" 长度
                                        if let Some(name_end) =
                                            input_tag[name_value_start..].find("\"")
                                        {
                                            input_tag[name_value_start..name_value_start + name_end]
                                                .to_string()
                                        } else {
                                            "unnamed".to_string()
                                        }
                                    } else {
                                        "unnamed".to_string()
                                    };

                                    form_info.push_str(&format!(
                                        "<input> 名称: {}, 类型: {}\n",
                                        field_name, field_type
                                    ));

                                    input_start_index = input_end;
                                    field_index += 1;
                                }

                                // 也可以类似地添加select和textarea标签的解析
                            }

                            form_info.push_str("\n");
                            form_index += 1;
                            start_index = actual_end;
                        } else {
                            // 表单没有闭合标签
                            break;
                        }
                    }
                }
            }
            Err(e) => {
                form_info = format!("HTML解析错误: {}", e);
            }
        }

        self.form_info = form_info;
    }

    /// 渲染ARIA支持测试标签页
    ///
    /// # 参数
    /// - `ui`: egui的用户界面上下文
    ///
    /// # 功能
    /// 提供HTML输入和ARIA属性分析功能，检测并统计各类ARIA属性使用情况。
    pub fn render_aria_tab(&mut self, ui: &mut egui::Ui) {
        ui.heading("ARIA支持");

        ui.add_space(10.0);

        ui.columns(2, |columns| {
            // 左侧 - HTML输入
            columns[0].vertical(|ui| {
                ui.label("HTML内容:");
                ui.add(
                    egui::TextEdit::multiline(&mut self.html_input)
                        .desired_width(ui.available_width())
                        .desired_rows(15)
                        .code_editor(),
                );

                ui.add_space(5.0);
                if ui.button("分析ARIA属性").clicked() {
                    self.analyze_aria();
                }
            });

            // 右侧 - 分析结果
            columns[1].vertical(|ui| {
                ui.label("ARIA分析结果:");
                ui.add(
                    egui::TextEdit::multiline(&mut self.aria_info)
                        .desired_width(ui.available_width())
                        .desired_rows(15)
                        .interactive(false),
                );
            });
        });
    }

    // 添加ARIA分析辅助方法
    /// 分析HTML中的ARIA属性
    ///
    /// # 功能
    /// 检测HTML中的ARIA属性使用情况，统计各类属性出现次数并生成分析报告。
    fn analyze_aria(&mut self) {
        let mut aria_info = String::new();

        match self.parser.parse(&self.html_input) {
            Ok(_) => {
                // 检测ARIA属性
                let aria_attribute_names = [
                    "role",
                    "aria-label",
                    "aria-labelledby",
                    "aria-describedby",
                    "aria-hidden",
                    "aria-expanded",
                    "aria-checked",
                    "aria-required",
                    "aria-controls",
                    "aria-live",
                ];

                let mut has_aria = false;
                let mut aria_counts = std::collections::HashMap::new();

                // 计算各类ARIA属性出现次数
                for attr in &aria_attribute_names {
                    let count = self.html_input.matches(&format!("{}=\"", attr)).count();
                    if count > 0 {
                        has_aria = true;
                        aria_counts.insert(*attr, count);
                    }
                }

                if !has_aria {
                    aria_info = "未在HTML中发现ARIA属性".to_string();
                } else {
                    aria_info = "ARIA属性分析结果:\n\n".to_string();

                    // 总结属性数量
                    aria_info.push_str("发现的ARIA属性:\n");
                    for (attr, count) in &aria_counts {
                        aria_info.push_str(&format!("- {}: {} 次\n", attr, count));
                    }

                    aria_info.push_str("\n详细分析:\n");

                    // 提取并展示具有ARIA属性的元素
                    let mut start_index = 0;
                    let mut element_index = 1;

                    while start_index < self.html_input.len() {
                        // 查找任何一个包含ARIA属性的标签开始位置
                        let next_aria_pos = aria_attribute_names
                            .iter()
                            .filter_map(|attr| {
                                self.html_input[start_index..]
                                    .find(&format!("{}=\"", attr))
                                    .map(|pos| (pos, *attr))
                            })
                            .min_by_key(|(pos, _)| *pos);

                        if let Some((aria_pos, aria_attr)) = next_aria_pos {
                            let actual_aria_pos = start_index + aria_pos;

                            // 向前查找标签开始位置
                            let tag_start =
                                self.html_input[..actual_aria_pos].rfind("<").unwrap_or(0);

                            // 向后查找标签结束位置
                            let tag_end = self.html_input[actual_aria_pos..]
                                .find(">")
                                .map(|pos| actual_aria_pos + pos + 1)
                                .unwrap_or(self.html_input.len());

                            let tag = &self.html_input[tag_start..tag_end];

                            // 提取元素类型
                            let element_type = if let Some(space_pos) =
                                tag[1..].find(|c: char| c.is_whitespace())
                            {
                                &tag[1..space_pos + 1]
                            } else {
                                "unknown"
                            };

                            aria_info
                                .push_str(&format!("{}. {} 元素:\n", element_index, element_type));

                            // 提取所有ARIA属性
                            for attr_name in &aria_attribute_names {
                                if let Some(attr_start) = tag.find(&format!("{}=\"", attr_name)) {
                                    let value_start = attr_start + attr_name.len() + 2; // attr="
                                    if let Some(value_end) = tag[value_start..].find("\"") {
                                        let value = &tag[value_start..value_start + value_end];
                                        aria_info
                                            .push_str(&format!("   - {}: {}\n", attr_name, value));
                                    }
                                }
                            }

                            aria_info.push_str("\n");
                            element_index += 1;
                            start_index = tag_end;
                        } else {
                            break;
                        }
                    }

                    // 添加可访问性建议
                    aria_info.push_str("可访问性建议:\n");

                    if !aria_counts.contains_key("role") {
                        aria_info.push_str("- 考虑为主要界面元素添加role属性以提高可访问性\n");
                    }

                    if !aria_counts.contains_key("aria-label")
                        && !aria_counts.contains_key("aria-labelledby")
                    {
                        aria_info.push_str(
                            "- 为非文本内容（如按钮、图标）添加aria-label或aria-labelledby\n",
                        );
                    }

                    if !aria_counts.contains_key("aria-live") {
                        aria_info.push_str("- 动态内容应考虑使用aria-live属性通知辅助技术\n");
                    }
                }
            }
            Err(e) => {
                aria_info = format!("HTML解析错误: {}", e);
            }
        }

        self.aria_info = aria_info;
    }

    /// 渲染DOM遍历测试标签页
    ///
    /// # 参数
    /// - `ui`: egui的用户界面上下文
    ///
    /// # 功能
    /// 1. 提供HTML输入区域用于输入待测试的HTML文档
    /// 2. 实现多种DOM遍历方式测试：
    ///    - 深度优先遍历(DFS)
    ///    - 广度优先遍历(BFS)
    ///    - 按节点类型过滤遍历
    ///    - 按CSS类名过滤遍历
    /// 3. 可视化展示遍历路径和结果
    /// 4. 支持导出遍历结果
    ///
    /// # 实现说明
    /// 1. 使用html_parser解析输入的HTML文档生成DOM树
    /// 2. 提供遍历算法选择按钮组
    /// 3. 根据选择的遍历算法执行DOM遍历
    /// 4. 将遍历结果格式化为可读性强的文本
    /// 5. 在结果区域显示遍历路径和节点信息
    pub fn render_dom_traversal_tab(&self, ui: &mut egui::Ui) {
        todo!()
    }

    /// 渲染链接提取器测试标签页
    ///
    /// # 参数
    /// - `ui`: egui的用户界面上下文
    ///
    /// # 功能
    /// 提供HTML输入和链接提取功能，从HTML中提取所有链接(a标签)并显示其href属性。
    /// 可以测试链接提取的准确性和完整性。
    pub fn render_link_extractor_tab(&self, ui: &mut egui::Ui) {
        todo!()
    }

    /// 渲染HTML清理测试标签页
    ///
    /// # 参数
    /// - `ui`: egui的用户界面上下文
    ///
    /// # 功能
    /// 提供HTML输入和清理功能，测试HTML清理器去除冗余标签、空白字符和无效属性的能力。
    /// 可以比较清理前后的HTML差异。
    pub fn render_html_cleaner_tab(&self, ui: &mut egui::Ui) {
        todo!()
    }

    /// 渲染SVG支持测试标签页
    ///
    /// # 参数
    /// - `ui`: egui的用户界面上下文
    ///
    /// # 功能
    /// 提供SVG输入和解析功能，测试SVG标签的解析和渲染支持。
    /// 可以验证SVG路径、图形和动画元素的正确解析。
    pub fn render_svg_support_tab(&self, ui: &mut egui::Ui) {
        todo!()
    }

    /// 渲染MathML支持测试标签页
    ///
    /// # 参数
    /// - `ui`: egui的用户界面上下文
    ///
    /// # 功能
    /// 提供MathML输入和解析功能，测试数学标记语言的解析和渲染支持。
    /// 可以验证数学公式、符号和结构的正确显示。
    pub fn render_mathml_support_tab(&self, ui: &mut egui::Ui) {
        todo!()
    }
}
